<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title></title>
</head>
    
<body>
<style type="text/css">
    html{
        height:3000px;
        background:#CCCCDD
    }
    #toTop{
        width: 50px;
        height: 50px;
        bottom:10px;
        right:15px;
        position:fixed;
        cursor:pointer;
        z-index:9999
    }
</style>
<script src="JS/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		if($(this).scrollTop()==0){//判断页面向下滚动距离是否为0
			$("#toTop").hide();//设置图标隐藏
		}
		$(window).scroll(function(){
			if($(this).scrollTop()==0){//判断页面向下滚动距离是否为0
				$("#toTop").hide();//设置图标隐藏
			}else{
				$("#toTop").show();//设置图标显示
			}
		});
		$("#toTop").click(function(){//单击图标
			$("html,body").animate({//设置自定义动画
				scrollTop:"0px"
			},500)
		});
	});
</script>
<div>向下滚动查看效果</div>
<div id="toTop">
	<img src="1.png">
</div>

</body>
</html>
